<template>
    <div>
        <el-container>
            <aside class="site-sidebar" :style="{'width':(isCollapse == false ? '210px':'')}">
                <div></div>
                <div class="site-sidebar__inner">
                    <el-menu :default-active="menuActiveName" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="handleselect" :collapse="isCollapse" text-color="#fff" active-text-color="#ffd04b" :unique-opened="true" background-color="#263238" router>
                        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
                            <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-menu-item v-for="(item,i) in menuList" :key="i" :index="item.path">
                            <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
                            <span slot="title">{{item.resourceName}}</span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </aside>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            menuList: [
                // { name: 'home', navItem: '首页' },
                // { name: 'sys-menu', navItem: '菜单管理' },
                // { name: 'sys-user', navItem: '账号管理' },
                // { name: 'sys-role', navItem: '角色管理' },
            ],
            // navList: [],
            selectnavList: []
        };
    },
    computed: {
        isCollapse: { //控制菜单是否折叠
            get() {
                return this.$store.state.common.isCollapse;
            },
        },
        mainTabs: {
            get() {
                return this.$store.state.common.editableTabs;
            },
            set(val) {
                this.$store.commit('updateTabsTag', val)
            }

        },
        isCollapse: {
            get() {
                return this.$store.state.common.isCollapse            }
        },
        menuActiveName: {
            get() { return this.$store.state.common.menuActiveName },
            set(val) { this.$store.commit('updatemenuActiveName', val) }
        },
        mainTabsActiveName: {
            get() { return this.$store.state.common.mainTabsActiveName },
            set(val) { this.$store.commit('updateMainTabsActiveName', val) }
        }
    },
    watch: {
        $route: 'routeHandle',

    },
    created() {
        
    },
    mounted() {
        this.menuList = JSON.parse(sessionStorage.getItem('menuList'));
        this.$store.commit('menuList', this.menuList);
       
    },
    methods: {
        handleselect(index) {
            this.menuActiveName = index;
        },
        handleOpen(key, keyPath) {

        },
        handleClose(key, keyPath) {

        },
        routeHandle(route) {
            console.log(route)
            //标签页选中,如果不存在则先添加
            //检查现有的tab标签中是否存在,通过path去判断
            var tab = this.mainTabs.filter(item => item.name === route.name)[0];
            if(route.path === '/home') {
                this.mainTabsActiveName = 'home';
            } else {
                if(!tab) {
                    tab = {
                        name: route.name,
                        title: route.meta.title,
                        path: route.path,
                        // close: route.meta.close
                        params: route.params,
                        query: route.query
                    }
                    this.mainTabs = this.mainTabs.concat(tab);
                    console.log(this.mainTabs);
                }
                this.mainTabsActiveName = tab.name;
            }
            // if (!tab) {
            //     console.log(5555)
            //     if (route.name !== 'home') {
            //         tab = {
            //             name: route.name,
            //             title: route.meta.title,
            //             path: route.path,
            //             // close: route.meta.close
            //             params: route.params,
            //             query: route.query
            //         }
            //         this.mainTabs = this.mainTabs.concat(tab);
            //         localStorage.setItem('mainTabs', this.mainTabs)
            //     }
            // }
            // this.menuActiveName = tab.name;
            // console.log(6666)

        }
    }
}
</script>
<style lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 210px;
    height: 100%;
    // min-height: 400px;
}
.el-menu--collapse {
    height: 100%;
}
.site-sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    z-index: 1020;
    // width: 230px;
    overflow: hidden;
    // background-color: #263238;
    // border: 1px solid;
}
.site-sidebar__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding-bottom: 15px;
    overflow-y: scroll;
}
::-webkit-scrollbar {
    display: none;
}

.el-menu {
    border-right: none;
}
.site-sidebar__menu-icon {
    margin-right: 5px;
    text-align: center;
    font-size: 16px;
    color: inherit !important;
}
</style>